<%@page import="java.util.List"%>
<%@page import="com.vsct.maia.auditl.DataManager"%>
<%@page import="com.vsct.maia.auditl.dto.ServiceTableLine"%>
<%@page import="com.vsct.maia.auditl.DateOutils"%>
<%@page import="com.vsct.maia.auditl.ResourceManager"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page import="com.vsct.maia.auditl.ConnexionBD"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MAIA 1.0</title>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	
	<!-- Add JQueryUI -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-lightness/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon-1.3.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>


<!--Ici le fichier maia_functions.js qui contient les fonctions javascript à modifier en cas de besoin -->
<script src="js/maia_functions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {		
	 	ajoutPercentille();
		$(".hoverd").hover(function(){
		   $(this).addClass("hover");
		 },function(){
		   $(this).removeClass("hover");
		 });
	
		// initialisation des valeurs pour afficher la graphe au moment de demarrage
		$('table[class="table"]').remove();
		
		dateHandler();
		// lorsque je soumets le formulaire
		  //$("table").tablesorter({ theme: 'blue' });
		  $('#form_service').on('submit', function() {
	   
	
		var services = $('#filter_services').val();
	    var dateDebut = $('#date_picker_dateDebut').val();
	    var dateFin = $('#date_picker_dateFin').val();
	    var groupBy = $('#filter_group_by').val();
	    var percentile=$('#filter_percentile').val();
	    percentile = percentile/100;
	    
	    console.log( "date_picker_dateDebut: " + dateDebut);
	    // je vérifie une première fois pour ne pas lancer la requête HTTP
	    // si je sais que mon serveur renverra une erreur
	    
	    
	    if(services === "") {
	        alert('Veuillez selectionner un service');
	    } else {		        	
	    	getChartData(services, dateDebut, dateFin,groupBy,percentile);
	    }
	    getServiceTable(services, dateDebut, dateFin,percentile);
	    getMethodTable(services, dateDebut, dateFin,percentile);
	    getErrorsTable(services, dateDebut, dateFin);
	    ajoutPercentille();
	    
	    return false; // j'empêche le navigateur de soumettre lui-même le formulaire
	});			 
	
	});

</script>

</head>

<body>
	
	<script src="js/highstock.js"></script>
	<script src="js/modules/exporting.js"></script>


	<div id="main"  >
		<div id="container_main">
		
		<div id="header">
				 <a href="#"><img src="images/buwdi.png" width="160"
					height="70" alt="logo-vsc"></a> <span class="divider"></span>
		</div>
		
		<!--div  header -->
		<div id="logo">
		    <ul class="breadcrumb">
	    	<li><a href="#">Home</a> <span class="divider"></span></li>	    
	    	</ul>
	     </div>
		<div id="left_side" class="pagination text_parag">
		
			<div id="div_service">
				<div class="page-header text_parag">
					<h5>Veuillez choisir le log, services et la plage horaire </h5>
				</div>
				<form id="form_service" name="services" class="form-inline" method="POST">
					
					<p><strong>Services</strong></p>
					<p class="cl_service" >			
						<select id="filter_services" multiple="multiple" size="5">
							<option class="opt_serv" id="filter_services_ALL" selected value="ALL">ALL</option>
							
							<%!DataManager serv = new DataManager();%>
							<%
								DateOutils ou = new DateOutils();
													ResourceManager r = new ResourceManager();
													for (String service : serv.getServices()){
							%>
							<option class="opt_serv  hoverd" id="filter_services_<%=service%>" value="<%=service%>"><%=service%></option>
							
							<%
								}
							%>
						</select>
						 <p> <strong>Group by:</strong></p>						
						 <p>
							<select class="group_by" id="filter_group_by" size="3">
								<option class="group_by hoverd" id="filter_groupe_min" value="minute">10 minutes</option>
								<option class="group_by hoverd" id="filter_groupe_hour" selected  value="hour">hour</option>							
								<option class="group_by hoverd" id="filter_groupe_day" value="day">day</option>							
							</select>
						</p>
						
						<p> <strong>Degre de percentile:</strong></p>
							
							<p>
							<select id="filter_percentile" class="deg_perc"  size="3" onclick="ajoutPercentille()">
							<option class="deg_perc hoverd" selected value="90">90</option>
							<option class="deg_perc hoverd"    value="95">95</option>							
							<option class="deg_perc hoverd"  value="98">98</option>
							
						</select>
						</p>						
						<p><label for="filter_dateDebut"><strong>From</strong></label><input  type="text" name="date_picker_dateDebut" id="date_picker_dateDebut" />
						<label for="filter_dateFin"><strong>To</strong></label><input type="text" name="date_picker_dateFin" id="date_picker_dateFin"  />					
						<input type="submit" value="visualiser" size="10" class="btn"/></p>						
				</form>
			</div>
		</div>
		<!-- div left_side -->
		
		<div id="statist" class="pagination" >
			<div id="menu_list">
				<ul>
					<li><a href="index.jsp#container" >1. Graphique</a></li><br/>
		          	<li><a href="index.jsp#service_tableau">2. Stats par appel de service (source : auditoutline)</a></li><br/>
		          	<li><a href="index.jsp#method_tableau">3. Stats par appel de methode (source : auditoutline)</a></li><br/>
		          	<li><a href="index.jsp#erreur_tableau">4. Stats des erreurs par appel de service (source : auditoutline)</a></li><br/>
				</ul>	
			</div>
				<hr/>					
			<div class="page-header text_parag" ><h5><var class="percentille_place"> </var><sup> e</sup> centile des temps d'exécution en millisecondes</h5></div>			
			<div id="container">
			
				<p>
					 <img src="images/chart_default.png" height="600" width="900" alt="Veuillez selectionner les données dans la menu à gauche"/> 
				</p>
				
			</div>
			<hr/>	
			<!-- div graphe -->
			<div id="service_tableau" >
				
				<!-- <p>Stats par appel de service : temps Résarail inclus</p> -->
				<p class="left_side_parag text"></p>
				<div class="page-header text_parag">
					<h5>Stats par appel de service (source : auditoutline)
					   <br/> Intervalle de temps : celui selectionné dans "<em>group by</em>"
					</h5>
				</div>
				  <TABLE BORDER="1"  class="table table-striped text_parag">
					<thead  id="tbody_service">
						<tr id="tb_service_title">
							<th class="s_serv_cell">Service</th>
							<th class="s_percent_cell"><var class="percentille_place"> </var><sup> e</sup> centile (ms)</th>
							<th class="s_moyen_cell">Moyenne (ms)</th>
							<th class="s_total_cell">Total</th>
							<th class="s_nbrAppel_cell" id="s_nbrAppl">Nb appels/h</th>
							<th class="s_pct_err_clas">Pourcentage err. classiques</th>
							<th class="s_pct_err_techn">Pourcentage err. techniques</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</TABLE>
				<p></p>
			</div>
			<hr/>
			<div id="method_tableau">
				<div class="page-header text_parag">
					<h5>Stats par appel de methode (source : auditoutline)<br/>
					Stats par appel de service : temps Résarail inclus</h5>
				</div>
				 <TABLE BORDER="1"   class="table table-striped text_parag">
					<thead id="tbody_method">
						<tr id="tb_method_title">
							<th class="m_serv_cell">Service</th>
							<th >Methode</th>
							<th class="m_percent_cell"><var class="percentille_place"> </var><sup> e</sup> centile (ms)</th>
							<th class="m_moyen_cell">Moyenne (ms)</th>
							<th class="m_total_cell">Total</th>
							<th class="s_nbrAppel_cell">Nb appels/h</th>
							<th class="s_pct_err_clas">Pourcentage err. classiques</th>
							<th class="s_pct_err_techn">Pourcentage err. techniques</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</TABLE> 
				<p>
			</div>
			<hr/>
			<!-- div tableau -->			
			<div id="erreur_tableau">
				<div class="page-header text_parag">
					<h5>Stats des erreurs par appel de service (source : auditoutline)</h5>					
				</div>
				 <TABLE BORDER="1"   class="table table-striped text_parag" >
					<thead id="tbody_errors">
						<tr id="tb_erreur_title">
							<th class="err_serv_cell">Service</th>
							<th class="err_serv_cell">Methode</th>
							<th class="err_code_cell">Erreur code</th>							
							<th class="err_prctage_cell">Pourcentage</th>
							<th class="err_libelle_cell">Libellé erreur</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</TABLE> 
				<p>
			</div>
			<!-- div tableau -->
			<hr/>
		</div>
		<!-- statist -->
		<div id="footer" class="text_parag">

			<p>footer footer footer footer footer footer</p>
		</div>
		<!-- div footer -->
		</div>
	</div> <!-- div main_page -->
	
</body>
</html>